<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2014当了一回背包客</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css" rel="stylesheet">
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
<div id="map" style="width: 100%;height:100%"></div>
<div id="popup" class="ol-popup"
     style="background-color: white;padding: 15px;border-radius: 10px;border: 1px solid #cccccc;">
    <div id="popup-content"></div>
</div>

<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
<script type="text/javascript" src="../../dist/iclient9-openlayers.min.js"></script>
<script type="text/javascript">
    new ol.supermap.WebMap(128).addEventListener(ol.supermap.WebMap.EventType.WEBMAPLOADEND, function (e) {
        var map = e.map;
        var popup = new ol.Overlay({
            element: document.getElementById('popup')
        });
        map.addOverlay(popup);
        map.on('click', function (evt) {
            var feature = map.forEachFeatureAtPixel(evt.pixel,
                    function (feature) {
                        return feature;
                    }, {hitTolerance: 10});
            if (feature) {
                popup.setPosition(evt.coordinate);
                document.getElementById('popup-content').innerHTML = feature.getProperties().attributes.title + ":" + feature.getProperties().attributes.description;
            } else {
                popup.setPosition();
            }
        })
    });
</script>
</body>
</html>